@use '../../token/breakpoint';
@use '../../token/colors';

$jhlite-toast-gap: 1vw;
$jhlite-toast-padding: 2vw;
$jhlite-toast-radius: 2vw;
$jhlite-toast-medium-gap: 10px;
$jhlite-toast-medium-padding: 10px 20px;
$jhlite-toast-medium-radius: 20px;
$jhlite-toast-color-text: colors.$jhlite-global-color-text-light;
$jhlite-toast-success-color-background: colors.$jhlite-global-color-success;
$jhlite-toast-error-color-background: colors.$jhlite-global-color-error;

.jhlite-toast {
  display: flex;
  gap: $jhlite-toast-gap;
  align-items: center;
  border-radius: $jhlite-toast-radius;
  padding: $jhlite-toast-padding;
  color: $jhlite-toast-color-text;
  font-size: 1.5rem;

  &.-success {
    background-color: $jhlite-toast-success-color-background;
  }

  &.-error {
    background-color: $jhlite-toast-error-color-background;
  }

  &--message {
    flex-basis: 0;
    flex-grow: 1;
  }

  &--action {
    opacity: 0.7;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 2rem;

    &:hover {
      opacity: 1;
    }
  }
}

@media screen and (min-width: breakpoint.$jhlite-global-breakpoint-small-medium) {
  .jhlite-toast {
    gap: $jhlite-toast-medium-gap;
    border-radius: $jhlite-toast-medium-radius;
    padding: $jhlite-toast-medium-padding;
  }
}
